var React = require('react');
var AppView = require('../../common/component/view/app-view.node');
var AssignRoleDialog = require('./assign-role-dialog.node');

module.exports = <>
  <AppView viewTitle="${t('ui.account.user.title.userManagement')}">
    <link href="${appCss('static/app/account/user-management.css')}" rel="stylesheet" />

    <div className="x-search-bar">
    <form>
        <div className="form-row align-items-center">

          <div className="col-auto">
            <label className="sr-only" htmlFor="userName"></label>
            <div className="input-group mb-2">
              <div className="input-group-prepend">
                <div className="input-group-text">{"${t('ui.account.user.field.userName')}"}</div>
              </div>
              <input type="text" className="form-control" id="userName" data-x-name="searchField.userName"
                data-x-type="autoTrimText" />
            </div>
          </div>

          {/* 查询按钮 */}
          <div className="col-auto">
            <button type="button" className="btn btn-primary mb-2" data-x-ui="searchBtn">
              {"${t('ui.system.common.btn.search')}"}
            </button>
          </div>
        </div>
      </form>
    </div>

    <div className="x-tool-bar">
    </div>

    {/* 用户表格 */}
    <table data-x-ui="userTable" className="x-table-custom">
      <thead>
        <tr>
          <th data-field="id" data-visible="false">ID</th>
          <th data-field="userName">{"${t('ui.account.user.field.userName')}"}</th>
          <th data-field="password">{"${t('ui.account.user.field.password')}"}</th>
          <th>{"${t('ui.system.common.field.operate')}"}</th>
        </tr>
      </thead>
    </table>

    {/* 分配角色对话框 */}
    <div data-x-ui="assignRoleDialog" className="modal" tabIndex="-1">
      <AssignRoleDialog />
    </div>

    <script src="${appJs('app/common/js/table-selection-tabs.js')}" type="text/javascript"></script>
    <script src="${appJs('app/account/user-management/user-management.js')}" type="text/javascript"></script>
    <script src="${appJs('app/account/user-management/assign-role-dialog.js')}" type="text/javascript"></script>
  </AppView>
</>
